<template>
	<view class="feedback">
		<view class="" style="padding: 30rpx;">
			<view class="" style="margin-left: 30rpx;">
				<view class="large-size" style="font-weight: bold;">
					Hello
				</view>
				<view class="small-size" style="color: #808764;">
					请留下您宝贵的建议~
				</view>
			</view>
			<view class="w94 bgwhite radius20 p-30 mt20">
				<view class="">
					<text>选择类型</text>
					<text style="color: red;">*</text>
				</view>
				<view class="flex " style="flex-wrap: wrap;">
					<view class="small-size item" v-for="i in list" :key="i.id" style="" @click="clicks(i)"
						:class="current==i.id?'act':'small-size item'">
						{{i.name}}
					</view>
				</view>
			</view>
			<view class="w94 bgwhite radius20 p-30 mt20">
				<view class="">
					<text>反馈描述：</text>
					<text style="color: red;">*</text>
				</view>
				<view class=" " style="">
					<view class="" style="width: 100%;">
						<u--textarea v-model="text" placeholder="请输入您需要反馈的问题" :height="290" border="none"
							maxlength="500"></u--textarea>
					</view>
					<view class="">
						<!-- 	<view class="w94 radius20 flex"
							style="background-color: #F8F8F8; height: 400rpx; justify-content: center;align-items: center;"
							v-if="!srcList.length" @click="upLife">
							<image src="@/static/login/2.png" mode="" style="width: 100rpx;height: 100rpx;">
							</image>
						</view> -->
						<view class="flex " style="min-height: 260rpx; flex-wrap: wrap;" v-if="!srcList.length"
							@click="upLife">
							<block v-for="i in 4" :key="i">
								<image src="@/static/lg.png" mode=""
									style="background-color: #e5e5e5;border-radius:20rpx;width: 240rpx;height: 240rpx;margin: 10rpx;">
								</image>
							</block>
						</view>
						<block v-else v-for="i in srcList" :key="i">
							<image :src="i" mode=""
								style="width: 240rpx;height: 240rpx;border-radius: 25rpx;margin-left: 20rpx;background-color: #F8F8F8;">
							</image>
						</block>
						<view class="small-size" style="color: #e5e5e5;">上传问题截图可以更快解决问题!</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex" style="justify-content: center;position: fixed;bottom: 40rpx;width: 100%;">
			<view class=""
				style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color:#CEEE5B;text-align: center;line-height: 2.5;margin-top: 40rpx;"
				@click="save">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_yijian,
		uploadFiles,
		add_yijian
	} from '@/common/teacherReq';
	export default {
		data() {
			return {
				list: [{
					"id": 1,
					"name": "客户问题",
				}, {
					"id": 2,
					"name": "其他",
				}],
				current: '',
				text: '',
				srcList: [
					// "http://192.168.110.110:8080/uploads/20250122/4dcc27262f32645938ed8b5c5bc6de1b.png",
					// "http://192.168.110.110:8080/uploads/20250122/c6247eb38c65bd4e5832b05f2e6b0d87.jpg",
					// "http://192.168.110.110:8080/uploads/20250122/6c663347b7c4b229aaf2c2b688348ee1.jpg",
					// "http://192.168.110.110:8080/uploads/20250122/03d95c839bff93971b55c518c2e38815.png"
				]
			};
		},
		methods: {
			clicks(value) {
				this.current = value.id
			},
			upLife() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(JSON.stringify(res.tempFilePaths));
						this.srcList = res.tempFilePaths
						uploadFiles({
							filePaths: res.tempFilePaths
						}).then(resp => {
							this.srcList = resp.map(ite => ite.data.fullurl)
						}).catch(err => {
							uni.showToast({
								icon: 'error',
								title: '上传失败' + err
							})
						})
					}
				})
			},
			save() {
				if (this.text.length && this.current) {
					add_yijian({
						category_id: this.current,
						content: this.text,
						photo: this.srcList
					}).then(res => {
						uni.showToast({
							icon: 'success',
							title: res.msg,
							success() {
								uni.switchTab({
									url: '/pages/user/index'
								})
							}
						})
					})
				}
			}
		},
		onLoad() {
			get_yijian({}).then(res => {
				this.list = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		height: calc(100vh - 15px);
		background: linear-gradient(to bottom, #CEEE5B, 30%, #fff);
		position: relative;

		.item {
			width: 170rpx;
			color: #B3B3B3;
			height: 70rpx;
			border: 2rpx solid #B3B3B3;
			text-align: center;
			line-height: 70rpx;
			margin: 10rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;
		}

		& .act {
			color: #000;
			border: 2rpx solid $uni-color-primary;
			background: #CEEE5B;
		}
	}
</style>